<template>
	<div class="planList_box">
		<SiderBav :nav="planNav"></SiderBav>
		<div class="planList_content">
				  <div class="btn_box">
					<div class="title">
						<span>计划名称:</span>{{  campaign_Name }}
					</div>
					<el-select v-model="planStatus" placeholder="请选择" style="height: 32px;">
							<el-option
								v-for="item in options"
								:key="item.value"
								:label="item.label"
								:value="item.value">
							</el-option>
						</el-select>
						<div style="float:right;width:200px;height:32px;margin-right:32px;">
							<el-input v-model="searchPlanName" placeholder="单元名"></el-input>
						</div>
				</div>
				<!-- <div v-loading="loading" v-if="loading" style="margin-top:100px"></div> -->
				<div class="empty" v-show="dataList.length<=0 && !loading">
					暂无数据
				</div>
				<table  class="list-table" v-show="dataList.length>0">
					<tr style="height: 60px; background: #fafafa;">
						<template >
							<th style="width:8%;"><input type="checkbox" v-model="checkListAll" style="margin-right:10px;" name="" id="">选择</th>
							<th>状态</th>
							<th>推广单元名</th>
							<th>
								消耗 
								<a href="javascript:;" :class="{'sortClass':sortType=='charge-asc'}"  @click="sortfn('charge-asc')"> <i class="el-icon-sort-up"></i></a>
								<a href="javascript:;" :class="{'sortClass':sortType=='charge-desc'}" @click="sortfn('charge-desc')"> <i class="el-icon-sort-down	"></i> </a>
							</th>
							<th>
								上小时消耗
								<a href="javascript:;" :class="{'sortClass':sortType=='last_charge-asc'}" 
								@click="sortfn('last_charge-asc')"> 
									<i class="el-icon-sort-up"></i>
								</a>
								<a href="javascript:;" :class="{'sortClass':sortType=='last_charge-desc'}" @click="sortfn('last_charge-desc')"> 
									<i class="el-icon-sort-down	"></i> 
								</a>
							</th>
							<th>
								展现
								<a href="javascript:;" :class="{'sortClass':sortType=='ad_pv-asc'}" @click="sortfn('ad_pv-asc')"> 
									<i class="el-icon-sort-up"></i>
									</a>
								<a href="javascript:;" :class="{'sortClass':sortType=='ad_pv-desc'}" @click="sortfn('ad_pv-desc')">
									 <i class="el-icon-sort-down	"></i> 
								</a>
							</th>
							<th>
								点击
								<a href="javascript:;" :class="{'sortClass':sortType=='click-asc'}" @click="sortfn('click-asc')"> 
									<i class="el-icon-sort-up"></i>
									</a>
								<a href="javascript:;" :class="{'sortClass':sortType=='click-desc'}" @click="sortfn('click-desc')"> 
									<i class="el-icon-sort-down	"></i> 
								</a>
							</th>
							<th>
								CTR
								<a href="javascript:;" :class="{'sortClass':sortType=='ctr-asc'}" @click="sortfn('ctr-asc')"> 
									<i class="el-icon-sort-up"></i>
								</a>
								<a href="javascript:;" :class="{'sortClass':sortType=='ctr-desc'}" @click="sortfn('ctr-desc')"> 
									<i class="el-icon-sort-down	"></i>
								</a>
							</th>
							<th>
								CPM
								<a href="javascript:;" :class="{'sortClass':sortType=='ecpm-asc'}" @click="sortfn('ecpm-asc')"> 
									<i class="el-icon-sort-up"></i>
								</a>
								<a href="javascript:;" :class="{'sortClass':sortType=='ecpm-desc'}"  @click="sortfn('ecpm-desc')"> <i class="el-icon-sort-down"></i> </a>
							</th>
							<th>
								CPC
								<a href="javascript:;" :class="{'sortClass':sortType=='ecpc-asc'}" @click="sortfn('ecpc-asc')"> <i class="el-icon-sort-up"></i></a>
								<a href="javascript:;" :class="{'sortClass':sortType=='ecpc-desc'}" @click="sortfn('ecpc-desc')"> <i class="el-icon-sort-down	"></i> </a>	
							</th>
							<th>
								店铺收藏
								<a href="javascript:;" :class="{'sortClass':sortType=='dir_shop_col_num-asc'}" @click="sortfn('dir_shop_col_num-asc')"> <i class="el-icon-sort-up"></i></a>
								<a href="javascript:;" :class="{'sortClass':sortType=='dir_shop_col_num-desc'}" @click="sortfn('dir_shop_col_num-desc')"> <i class="el-icon-sort-down	"></i> </a>	
							</th>
							<th>
								宝贝收藏
								<a href="javascript:;" :class="{'sortClass':sortType=='inshop_item_col_num-asc'}" @click="sortfn('inshop_item_col_num-asc')"> <i class="el-icon-sort-up"></i></a>
								<a href="javascript:;" :class="{'sortClass':sortType=='inshop_item_col_num-desc'}" @click="sortfn('inshop_item_col_num-desc')"> <i class="el-icon-sort-down	"></i> </a>	
							</th>
							<th>
								加购
								<a href="javascript:;" :class="{'sortClass':sortType=='cart_num-asc'}" @click="sortfn('cart_num-asc')"> <i class="el-icon-sort-up"></i></a>
								<a href="javascript:;" :class="{'sortClass':sortType=='cart_num-desc'}" @click="sortfn('cart_num-desc')"> <i class="el-icon-sort-down	"></i> </a>	
							</th>
							<th>
								TOL
								<a href="javascript:;" :class="{'sortClass':sortType=='roi-asc'}" @click="sortfn('roi-asc')"> <i class="el-icon-sort-up"></i></a>
								<a href="javascript:;" :class="{'sortClass':sortType=='roi-desc'}" @click="sortfn('roi-desc')"> <i class="el-icon-sort-down	"></i> </a>	
							</th>
						</template>
					</tr>
					<template v-for="(o) in dataList"  >
						<tr  :class="{'trbg':o.hover}" style="border-bottom: 1px solid #ebebeb;"><!-- @mouseover="trhoverFn(o)"-->
							<template >
									<td>
										<input type="checkbox" v-model="checkList" style="margin-right:3em;" :value="o.adgroup_id"  name="" id="">
									</td>
									<td>
										{{ o.online_status | planStatus }}
									</td>
									<td>
										{{ o.adgroup_name }}
									</td>
									<td>
										{{ o.charge }}
									</td>
									<td>
										{{ o.last_charge }}	
									</td>
									<td>
										{{ o.ad_pv }}	
									</td>
									<td>
										{{ o.click }}	
									</td>
									<td>
										{{ o.ctr }}	
									</td>
									<td>
										{{ o.ecpm }}	
									</td>
									<td>
										{{ o.ecpc }}	
									</td>
									<td>
										{{ o.dir_shop_col_num }}	
									</td>
									<td>
										{{ o.inshop_item_col_num }}	
									</td>
									<td>
										{{ o.cart_num }}	
									</td>
									<td>
										{{ o.roi }}	
									</td>
							</template>
						</tr>
						<!-- <tr :class="{'trBtnbg':o.hover}"     style="border-bottom: 1px solid #ebebeb">
							<td colspan="5" v-show="o.hover" style="text-align: left;height: 40px; padding-left: 50px;">
								<el-button @click="toCrowds(o)"  size="mini" plain>定向</el-button>
								<el-button @click="toDetail(o)"  size="mini" plain>单元</el-button>
							
							</td>
						</tr> -->
					</template>
				</table>
				<el-pagination  v-show="total_count>19"
					:page-size="20"
					:pager-count="11"
					layout="prev, pager, next"
					:total="total_count"
					@current-change="pagechange"
					:current-page="currentPage"
					>
				</el-pagination>
		</div>
	</div>
</template>
<style src="./style.css" scoped lang="less"></style>
<script src="./script.js"></script>



